<template>
  <view 
    class="custom-radio"
    :style="{
      backgroundColor: checked ? activeBgColor : inactiveBgColor,
      padding: padding + 'rpx',
      borderRadius: borderRadius + 'rpx'
    }"
    @click="handleClick"
  >
    <view 
      class="radio-icon" 
      :style="{
        width: iconSize + 'rpx',
        height: iconSize + 'rpx',
        borderColor: checked ? activeBorderColor : inactiveBorderColor
      }"
    >
      <view 
        class="radio-dot" 
        v-if="checked"
        :style="{
          backgroundColor: dotColor,
          width: dotSize + 'rpx',
          height: dotSize + 'rpx'
        }"
      ></view>
    </view>
    <text 
      class="radio-label" 
      :style="{
        fontSize: fontSize + 'rpx',
        color: checked ? activeTextColor : inactiveTextColor,
        marginLeft: labelMargin + 'rpx'
      }"
    >{{ label }}</text>
  </view>
</template>

<script>
export default {
  name: "CustomRadio",
  props: {
    // 标签文本
    label: {
      type: String,
      default: ""
    },
    // 是否选中
    checked: {
      type: Boolean,
      default: false
    },
    // 图标大小
    iconSize: {
      type: Number,
      default: 40
    },
    // 圆点大小
    dotSize: {
      type: Number,
      default: 20
    },
    // 字体大小
    fontSize: {
      type: Number,
      default: 35
    },
    // 标签左边距
    labelMargin: {
      type: Number,
      default: 16
    },
    // 选中时背景色
    activeBgColor: {
      type: String,
      default: "#F0F7FF"
    },
    // 未选中时背景色
    inactiveBgColor: {
      type: String,
      default: "#FFFFFF"
    },
    // 选中时文本颜色
    activeTextColor: {
      type: String,
      default: "#007AFF"
    },
    // 未选中时文本颜色
    inactiveTextColor: {
      type: String,
      default: "#333333"
    },
    // 选中时边框颜色
    activeBorderColor: {
      type: String,
      default: "#007AFF"
    },
    // 未选中时边框颜色
    inactiveBorderColor: {
      type: String,
      default: "#CCCCCC"
    },
    // 圆点颜色
    dotColor: {
      type: String,
      default: "#007AFF"
    },
    // 内边距
    padding: {
      type: Number,
      default: 20
    },
    // 圆角大小
    borderRadius: {
      type: Number,
      default: 10
    }
  },
  methods: {
    handleClick() {
      if (!this.checked) {
        this.$emit("change");
      }
    }
  }
};
</script>

<style scoped>
.custom-radio {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  transition: background-color 0.3s;
}

.radio-icon {
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.3s;
}

.radio-dot {
  border-radius: 50%;
}

.radio-label {
  flex: 1;
}
</style>